<template>
	<div>
		<div class="table">
			<el-table
				:data="tableData"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="stuName" label="姓名" />
				<el-table-column prop="stuId" label="学号" />
				<el-table-column prop="dorNumber" label="寝室号" />
				<el-table-column prop="buildId" label="楼栋号" />
				<el-table-column prop="holReason" label="申请理由" />
				<el-table-column prop="holApply" label="申请状态">
					<template #default="{ row }">
						<span :style="hanndleStyle(row)">{{ row?.holApply }}</span>
					</template>
				</el-table-column>
				<el-table-column label="申请时间">
					<template #default="{ row }">
						{{ new Date(row.holTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column
					prop="holStatus"
					label="假期去向"
					sortable
					:filters="[
						{ text: '在校', value: '在校' },
						{ text: '离校', value: '离校' },
					]"
					:filter-method="filterHandler">
					<template #default="{ row }">
						<span :style="{ color: row.holStatus == '离校' ? 'red' : '#95d475' }">{{ row.holStatus }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getHolOneBuild } from '@/utils/axios/getTotal'
import { getAllStuHolInfo } from '@/utils/axios/domiRequests'

import { useUserStore } from '@/stores/userStore'

const { userInfo } = useUserStore()
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])

defineProps(["tableData","total"])
const $emit=defineEmits(["change"])





// 处理申请留校状态颜色
const hanndleStyle = (row) =>{
	return row?.holApply == '申请中'
		? { color: '#eebe77' }
		: row?.holApply == '已同意留校'
		? { color: '#95d475' }
		: { color: '#f89898' }
}

// 处理分页页面大小变化
const handleSizeChange = async (val) => {
	let { data } = await getAllStuHolInfo({ currentPage: currentPage.value, pageSize: val })
	hoildayInfo.value = data
	$emit("change",{data})
}
// 处理当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getAllStuHolInfo({ currentPage: val, pageSize: pageSize.value })
	$emit("change",{data})
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

const filterHandler = (value, row, column) => {
	const property = column['property']
	return row[property] === value
}

onMounted(async () => {
	let { data } = await getAllStuHolInfo({ currentPage: currentPage.value, buildId: userInfo.buildId })
	let res = await getHolOneBuild({ buildId: Number.parseInt(userInfo.buildId) })
	$emit("change",{data,tota:res.data})
})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.header {
	margin-bottom: 20px;
}

.el {
	&-space {
		width: 100%;
		align-items: center;
	}
	&-select {
		width: 100px;
	}
	&-input {
		width: 120px;
	}
}

</style>
